<template>
	<div class="homeIndex">
		<view-title></view-title>

		<data-total title="今日休假" :list="todayList"></data-total>

		<data-total title="剩余休假" :list="userList"></data-total>

		<!-- 图表 -->
		<div class="echart_area">
			<div class="funnel_pie">
				<div class="pie com_bgm">
					<view-title title="用户构成"></view-title>
					<chart
						class="canvas-data"
						ref="pie"
						:options="userOptions"
						:auto-resize="true"
					></chart>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import dataTotal from "@components/dataTotal";

export default {
	name: "dataIndex",

	components: {
		[dataTotal.name]: dataTotal,
	},

	data() {
		return {
			userList: [],
			todayList: [],
			loadParams: {},
			userOptions: {}, //用户数据
		};
	},

	created() {
		this.getToday();
		this.getTotal();
		this.getUserData();
	},

	methods: {
		getToday() {
			this.$axios
				.post("attendanceList", {
					date: this.$utils.dateFormat(new Date(), "yyyy-MM-dd"),
					pageSize: 1000,
					pageIndex: 1,
				})
				.then((res) => {
					res.list.forEach((item) => {
						this.todayList.push({
							title: item.user.nickname,
							value: item.time,
						});
					});
				});
		},

		//获得总数据
		getTotal() {
			this.$axios
				.post("userList", {
					status: 1,
					pageSize: 1000,
					pageIndex: 1,
				})
				.then((res) => {
					res.list.forEach((item) => {
						this.userList.push({
							title: item.nickname,
							value: item.work_day - item.rest_day + item.year_day,
						});
					});
				});
		},

		// 用户构成
		getUserData() {
			this.$axios.get("userSex").then((res) => {
				this.userOptions = {
					tooltip: {
						trigger: "item",
						formatter: "{a} <br/>{b} : {c} ({d}%)",
					},
					legend: {
						bottom: "0",
						icon: "circle",
						data: ["男", "女"],
					},
					series: [
						{
							name: "员工构成",
							type: "pie",
							radius: "55%",
							center: ["50%", "45%"],
							data: [
								{ value: res.men, name: "男" },
								{ value: res.women, name: "女" },
							],
							itemStyle: {
								borderColor: "#ffffff",
								borderWidth: 2,
								color: function(params) {
									//自定义颜色
									var colorList = ["#3581F8", "#F27991"];
									return colorList[params.dataIndex];
								},
							},
						},
					],
				};
			});
		},

		exportData() {
			let url =
				location.hostname == "localhost" || location.port == "8080"
					? `https://boshi-test.01lb.com.cn/admin/statistic/export`
					: `${this.host}/admin/statistic/export`;
			window.open(url);
		},
	},
};
</script>
<style lang="less" scoped>
.echart_area {
	padding: 30px 0;
	.funnel_pie {
		display: flex;
		justify-content: space-between;
		.compued {
			margin-top: 30px;
			.com {
				color: #606266;
				font-size: 14px;
				margin: 15px 0;
				justify-content: start;
				.title {
					display: inline-block;
					width: 160px;
				}
				.show_load {
					width: 200px;
					height: 20px;
					background: #f8fbfd;
					border-radius: 10px;
					overflow: hidden;

					p {
						background: #3880f8;
						height: 100%;
						// border-radius: 10px;
					}
				}
				.num {
					margin: 0 10px 0 5px;
					color: #f8a363;
				}
			}
		}
	}
	.com_bgm {
		width: 100%;
		height: 420px;
		padding: 20px 20px 0;
		border-radius: 4px;
		background-color: #fff;
		box-sizing: border-box;
		margin-bottom: 15px;
		overflow-x: hidden;
		overflow-y: hidden;

		.canvas-data {
			height: 280px;
		}
        .echarts {
            width: 300px;
        }
	}
}
</style>
